<template>
  <div>
    <el-form-item
      :label="item.label"
      v-for="item in list"
      :key="item.prop + item.type"
    >
      <el-input
        v-if="item.type == 'input'"
        v-model="item.value"
        @change="handleChange($event, item)"
      ></el-input>
      <el-switch
        v-if="item.type == 'switch'"
        v-model="item.value"
        @change="handleChange($event, item)"
      ></el-switch>
      <el-select
        v-if="item.type == 'select'"
        v-model="item.value"
        @change="handleChange($event, item)"
      >
        <el-option
          v-for="(item, idx) in item.options"
          :key="'select' + idx"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-if="item.type == 'multiSelect'"
        v-model="item.value"
        multiple
        filterable
        allow-create
        default-first-option
        @change="handleChange($event, item)"
      >
        <el-option
          v-for="(item, idx) in item.options"
          :key="'multiSelect' + idx"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <template v-if="item.type == 'radio'">
        <el-radio-group
          v-model="item.value"
          @change="handleChange($event, item)"
        >
          <el-radio
            v-for="(item, idx) in item.options"
            :key="'radio' + idx"
            :label="item.value"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
      </template>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "formItems",
  props: {
    list: Array,
  },
  methods: {
    handleChange(e, item) {
      item.change && item.change(e);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
